<template>
    <div>
        <!-- vant的 tabbar -->
        <router-view />
        <van-tabbar class="topTabbar" route safe-area-inset-bottom v-model="active" @change="change" active-color="#07c160">
            <van-tabbar-item to="/homeClass" replace>
                <span>首页</span>
                <img slot="icon" slot-scope="props" :src="props.active ? icon.home.active : icon.home.normal">
            </van-tabbar-item>
            <van-tabbar-item to="/equity" replace>
                <span>积分兑权益</span>
                <img slot="icon" slot-scope="props" :src="props.active ? icon.class.active : icon.class.normal">
            </van-tabbar-item>

            <van-tabbar-item to="/myOrder" replace>
                <span>我的订单</span>
                <img slot="icon" slot-scope="props" :src="props.active ? icon.myorder.active : icon.myorder.normal">
            </van-tabbar-item>
            <van-tabbar-item to="/home" replace>
                <span>个人中心</span>
                <img slot="icon" slot-scope="props" :src="props.active ? icon.mine.active : icon.mine.normal">
            </van-tabbar-item>
        </van-tabbar>
    </div>
</template>
<script>
import { Tabbar, TabbarItem } from 'vant';
export default {
    data() {
        return {
            active: 0,
            isTopPage: false,
            icon: {
                home: {
                    normal: require('@/assets/images/icon/home_gray.png'),
                    active: require('@/assets/images/icon/home_green.png')
                },
                class: {
                    normal: require('@/assets/images/icon/ticket_gray.png'),
                    active: require('@/assets/images/icon/ticket_green.png')
                },
                myorder: {
                    normal: require('@/assets/images/icon/order-gray.png'),
                    active: require('@/assets/images/icon/order-green.png')
                },
                mine: {
                    normal: require('@/assets/images/icon/mine-gray.png'),
                    active: require('@/assets/images/icon/mine-green.png')
                }
            }
        };
    },
    mounted() {
        // 判断当前页面是否为home或newpersonal页面
        const nowPage = window.location.hash.split('/')[1];
        // if (
        //   window.history.length === 1 &&
        //   window.navigator.userAgent.toLowerCase().indexOf('iphone') !== -1
        // ) {
        //   this.isTopPage = true;
        // }
        if (nowPage === 'homeClass') {
            this.active = 0;
        } else if (nowPage === 'equity') {
            this.active = 1;
        } else if (nowPage === 'myOrder') {
            this.active = 2;
        } else if (nowPage === 'home') {
            this.active = 3;
        }
    },

    methods: {
        change() {
            if (this.active === 0) {
                this.$router.push({
                    path: '/homeClass',
                    replace: true
                });
            } else if (this.active === 1) {
                this.$router.push({
                    path: '/equity',
                    replace: true
                });
            }
        }
    },
    components: {
        'van-tabbar-item': TabbarItem,
        'van-tabbar': Tabbar
    }
};
</script>
<style lang="scss" scoped>
//vant tabbar
.topTabbar {
  height: 140px;
  box-shadow: 0px -1px 10px 0px #dcdcdc;
}
.topTabbar /deep/.van-tabbar-item__icon img {
  width: 43px;
  height: 43px;
}
</style>
